<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        function downLoad(filename,  content)  { //filename 文件名，content 下载的内容

                  
            var  aLink  =  document.createElement("a");

                  
            var  blob  =  new  Blob([content],   {

                        
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" //文件类
                          
            });

                  
            var  evt  =  new  Event("click");

                  
            aLink.download  =  filename;

                  
            aLink.href  =  URL.createObjectURL(blob);

                  
            aLink.click();

                  
            URL.revokeObjectURL(blob);

                
        }

        // 在获取后台接口成功的函数中调用下载函数（ vue）
        const API = {

        }
        API.download({ 
            id:  id 
        })

                .then(res  =>  {

                      
            this.downLoad("code.xlsx",  new  Uint8Array(res.data).buffer);

                    
        })

                .catch(err  =>  {});


        // 解决
        // 万能的 stackoverflow 给出了标准答案

        // 代码如下：

        // 前端：

        this.$http.post('/export-excel', {}, {
                responseType: 'blob'
            }).then(function(response) {
                const url = window.URL.createObjectURL(new Blob([response.data]))
                const link = document.createElement('a')
                link.href = url
                link.setAttribute('download', '导出报表.xlsx')
                document.body.appendChild(link)
                link.click()
            })
            // 后端：

        // public

        function exportExcel() {
            // 具体用法请参考 laravel-excel 文档
            // return Excel::download(new ExcelExport(), "导出报表.xlsx");
        }
    </script>

    <script>
        export default {
            data() {
                return {
                    downFileName: 'user_dowm', // 自定义下载的文件名
                }
            },
            methods: {　　 // 点击下载事件
                downLoadFail(data) {
                    this.$axios({
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: '/user/download',
                        data: data,
                        responseType: 'blob',
                        method: 'get'
                    }).then(res => {
                        if (typeof window.chrome !== 'undefined') {
                            // Chrome version
                            const blob = new Blob([res], {
                                type: 'application/vnd.ms-excel'
                            })
                            const urls = window.URL.createObjectURL(blob)
                            const a = document.createElement('a') // 生成虚拟a标签
                            a.href = urls
                            a.download = this.downFileName + '.xlsx'
                            a.click()
                            document.body.removeChild(a) // 下载完成移除元素
                            window.URL.revokeObjectURL(urls) // 释放掉blob对象
                        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                            // IE version
                            const blob = new Blob([res], {
                                type: 'application/force-download'
                            })
                            window.navigator.msSaveBlob(blob, this.downFileName)
                        } else {
                            // Firefox version
                            const file = new File([res], this.downFileName, {
                                type: 'application/force-download'
                            })
                            window.open(URL.createObjectURL(file))
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }
        }
    </script>
</body>

</html>